<template>
  <x-layout bg-color="#468e8d">
    <template #common>
      <div class="flex flex-col gap-20rpx p-40rpx  overflow-auto">
        <div class="flex flex-col gap-20rpx ">
          <div class="color-#fff flex text-28rpx  gap-10rpx flex-col mb-10rpx">
            <div class="text-32rpx font-700 flex items-center gap-10rpx">
              <div class="w-4px h-30rpx bg-#fff border-rd-8rpx" />
              当前卦：{{ caleGuaName ? caleGuaName['gua-name'] + '卦' : '' }}
            </div>
            <div>{{ caleGuaName['gua-detail'] || '' }}</div>
          </div>
          <div class="bg-#fff w-200rpx h-30rpx relative" v-for="(item, index) in caleResultList" :key="item">
            <div v-if="item % 2 === 0" class="absolute top-0 bottom-0 left-45% right-45% bg-#468e8d" />
            <div v-if="caleResultList.length === 6" class="absolute left-105% color-#fff text-24rpx w-500rpx">
              {{ caleGuaName['yao-detail'][5 - index] }}
            </div>
          </div>
          <div v-if="caleResultList.length === 6">
            <div class="w-100% bg-#fff color-#66a09f text-28rpx border-rd-16rpx p-20rpx flex flex-col">
              <div>解析：</div>
              <text class="text-p">
                {{ caleGuaName.detail }}
              </text>
            </div>
          </div>
        </div>
        <div v-if="resultList.length === 6" class="flex flex-col  gap-20rpx">
          <div class="color-#fff flex text-28rpx  gap-10rpx flex-col mb-10rpx">
            <div class="text-32rpx font-700 flex items-center gap-10rpx">
              <div class="w-4px h-30rpx bg-#fff border-rd-8rpx" />
              变卦：{{ caleBianGuaName ? caleBianGuaName['gua-name'] + '卦' : '' }}
            </div>
            <div>{{ caleBianGuaName['gua-detail'] || '' }}</div>
          </div>
          <div class="bg-#fff w-200rpx h-30rpx relative" v-for="(item, index) in caleResultList" :key="item">
            <div v-if="item === 8 || item === 9" class="absolute top-0 bottom-0 left-45% right-45% bg-#468e8d" />
            <div v-if="caleResultList.length === 6" class="absolute left-105% color-#fff text-24rpx w-500rpx">
              {{ caleBianGuaName['yao-detail'][5 - index] }}
            </div>
          </div>
          <div v-if="caleResultList.length === 6">
            <div class="w-100% bg-#fff color-#66a09f text-28rpx border-rd-16rpx p-20rpx flex flex-col">
              <div>解析：</div>
              <text class="text-p">
                {{ caleBianGuaName.detail }}
              </text>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template #scroll>
      <algorithm v-if="resultList.length < 6" @result="getResult" />
    </template>
  </x-layout>
</template>

<script setup>
import algorithm from './algorithm'
import { computed, ref } from 'vue'
import { gua64List } from '../data'

const resultList = ref([])

const caleResultList = computed(() => {
  const arr = [...resultList.value]
  return arr.reverse()
})

const caleBianGuaName = computed(() => {
  if (resultList.value.length < 6) return ''
  const str = resultList.value.map(item => {
    const map = {
      6: 1,
      7: 1,
      8: 0,
      9: 0
    }
    return map[item]
  }).join('')
  const findItem = gua64List.find(item => item['gua-xiang'] === str)
  return findItem || ''
})

const caleGuaName = computed(() => {
  if (resultList.value.length < 6) return ''
  const str = resultList.value.map(item => {
    if (item % 2) return 0
    return 1
  }).join('')
  const findItem = gua64List.find(item => item['gua-xiang'] === str)
  return findItem || ''
})

const getResult = (num) => {
  if (resultList.value.length >= 6) return
  resultList.value.push(num)
}
</script>

<style lang="scss" scoped>
.text-p {
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-line;
}
</style>
